
<!--<!DOCTYPE html>-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.2.0/theme-chalk/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3045003_lkxtjaj4m6.css">
    <link rel="stylesheet" href="./css/rotate.css">
</head>
<body>
<div id="app" style="padding: 50px;" v-cloak>
    <!--底座-->
    <div class="rotate-baseMap"></div>
    <!--旋转3D-->
    <div id="rotate" class="rotate">
        <button class="center">中心</button>
        <div class="itemList">
            <div class="rotate__item" :class="item.type" v-for="item in itemList">
                <div class="scale">
                    <div class="baseImg"></div>
                    <div class="cont">
                        <i class="iconfont" :class="item.icon"></i>
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineList">
            <div class="rotate__line" v-for="item in itemList" :class="item.type">
                <div v-if="item.type=='blue'" class="pos">
                    <svg width="10" height="400">
                        <path id="path1" d="M0 400, 0 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot1 el-icon-caret-right"></div>
                </div>
                <div v-if="item.type=='yellow'" class="pos">
                    <svg width="10" height="400">
                        <path id="path2" d="M0 400, 0 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot2"><i class="el-icon-close"></i></div>
                </div>
                <div v-if="item.type=='green'" class="pos" style="left: -16px;">
                    <svg width="50" height="400">
                        <path id="path3" d="M20 400 S 0 200, 20 0" stroke-dasharray="5,10"/>
                        <path id="path4" d="M20 400 S 40 200, 20 0" stroke-dasharray="5,10"/>
                    </svg>
                    <div class="dot dot3 el-icon-caret-right"></div>
                    <div class="dot dot4 el-icon-caret-right"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<script src="https://www.jq22.com/jquery/vue2.6.10.min.js"></script>
<script src="./js/rotate.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
					itemList: [
						{ name:'用户管理', type:'blue', icon:'icon-renyuanguanli', },
						{ name:'GPS服务', type:'green', icon:'icon-GPS', },
						{ name:'施工重地', type:'yellow', icon:'icon-a-lujishigong2x', },
						{ name:'数据中心', type:'blue', icon:'icon-shujufuwuzhongxin', },
						{ name:'智慧园区', type:'blue', icon:'icon-liangchang', },
						{ name:'摊铺压实服务', type:'blue', icon:'icon-tanpuyashifuwu', },
						{ name:'建筑施工', type:'blue', icon:'icon-lumianshigong', },
						{ name:'检测中心', type:'blue', icon:'icon-shiyanjiance', },
				],
        },
        mounted: function () {
					new rotate({
							id: '#rotate',
							farScale: 0.6,
							xRadius: 0,
							yRadius: 220,
					})
        },
        methods: {},
    });
</script>
</html>